<template>
  <div class="page_role_mgr">
    <Row style="margin: 5px 0px 10px 0px;">
      <Input placeholder="输入角色名进行查询" style="width: 200px;margin-right: 20px" />
      <Button type="primary" icon="ios-search" style="margin-right: 20px">查询</Button>
      <Button type="primary" icon="md-add" @click="toAddRole">新增角色</Button>
    </Row>
    <Row class="list_row">
      <Table :columns="columns" border :data="roleList" stripe>
        <template slot-scope="{ row, index }" slot="seq">
          {{(currentPage - 1) * pageSize + index + 1}}
        </template>
      </Table>
      <div class="div_page">
        <Page :total="totalCount" :current="currentPage" :page-size="pageSize"
              show-total show-elevator prev-text="<" next-text=">" @on-change="pageChg"/>
      </div>
    </Row>
    <Drawer title="添加角色" width="400" placement="right" :closable="false" v-model="showDrawer" style="height: 500px;">
      <Form ref="roleFormRef" :model="roleForm" :rules="roleFormValidateRules" :label-width="80">
        <FormItem label="角色名" prop="roleName">
          <Input v-model="roleForm.roleName" placeholder="输入角色名"></Input>
        </FormItem>
        <FormItem label="备注" prop="remark">
          <Input v-model="roleForm.remark" placeholder="输入备注"></Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="saveRole" :loading="saveLoading">
            <span v-if="!saveLoading">保存</span>
            <span v-else>保存中....</span>
          </Button>
        </FormItem>
      </Form>
    </Drawer>
  </div>
</template>

<script>
  import tables from '@/components/tables'
  import RoleApi from '@/api/roleApi'

  export default {
    components: {tables},
    name: "bdi-role-manage",
    data() {
      return {
        currentPage: 1,
        totalCount: null,
        pageSize: 10,
        saveLoading: false,
        showDrawer: false,
        roleForm: {
          id: '',
          roleName: '',
          remark: ''
        },
        roleFormValidateRules: {
          roleName: [
            {required: true, message: '角色名称不能为空', trigger: 'blur'}
          ]
        },
        roleList: [],
        columns: [
          {
            title: '序号',
            slot: 'seq',
            width: 80
          },
          {
            title: '角色名称',
            key: 'roleName',
          },
          {
            title: '备注',
            key: 'remark',
          },
          {
            title: '创建时间',
            key: 'createTime',
            width: 220
          },
          {
            title: '操作',
            width: 180,
            key: 'action',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'warning',
                    size: 'small'
                  },
                  style: {
                    marginRight: '15px'
                  },
                  on: {
                    click: () => {
                      this.roleForm.id = params.row.id;
                      this.roleForm.roleName = params.row.roleName;
                      this.roleForm.remark = params.row.remark;
                      this.showDrawer = true
                    }
                  }
                }, '修改'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    display: params.row.roleName === 'admin' ? 'none' : 'inline'
                  },
                  on: {
                    click: () => {
                      this.delRole(params.row);
                    }
                  }
                }, '删除')
              ]);
            }
          }
        ]
      }
    },
    methods: {
      pageChg(selPage) {
        this.currentPage = selPage
        this.fetchUserList()
      },
      fetchRoleList() {
        var param = {'pageSize': this.pageSize, 'currentPage': this.currentPage}
        RoleApi.pageResult(param).then(res => {
          this.roleList = res.data.data.pageResult.items
          this.totalCount = res.data.data.pageResult.totalCount
        }, error => {
          this.$Message.error(error.response.data.msg)
        })
      },
      toAddRole() {
        this.showDrawer = true;
        this.$refs.roleFormRef.resetFields()
      },
      saveRole() {
        this.$refs.roleFormRef.validate((valid) => {
          if (valid) {
            this.saveLoading = true;
            RoleApi.saveOrUpdate(this.roleForm).then(response => {
              this.saveLoading = false;
              this.$Message.success('操作成功')
              this.$refs.roleFormRef.resetFields()
              this.showDrawer = false
              this.currentPage = 1
              this.fetchRoleList()
            }, error => {
              this.saveLoading = false;
              this.$Message.error(error.response.data.msg)
            })
          }
        })
      },
      delRole(role) {
        this.$Modal.confirm({
          title: "删除提示",
          content: "确定删除该角色吗？",
          okText: "删除",
          cancelText: "取消",
          onOk: () => {
            this.doDel(role.id);
          }
        });
      },
      doDel(id) {
        RoleApi.delete(id).then(res => {
          this.$Message.success('操作成功')
          this.currentPage = 1
          this.fetchRoleList()
        }, error => {
          this.$Message.error(error.response.data.msg)
        });
      }
    },
    created() {
      this.currentPage = 1
      this.fetchRoleList()
    }
  }
</script>
